<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="MobileOptimized" content="320" />
    <title>扫码</title>
    <link href="../../css/common.css" rel="stylesheet"/>
    <link href="../../css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" src="../../js/mui.js"></script>
    <script type="text/javascript" src="../../js/vue.min.js"></script>
    <script type="text/javascript" src="../../js/fastclick.js"></script>
    <script type="text/javascript" src="../../js/common.js"></script>
    <script type="text/javascript">
        var ws = null,
            wo = null;
        var scan = null,
            domready = false;
        // H5 plus事件处理
        function plusReady() {
            if(ws || !window.plus || !domready) {
                return;
            }
            // 获取窗口对象
            ws = plus.webview.currentWebview();
            wo = ws.opener();
            // 开始扫描
            ws.addEventListener('show', function() {
                scan = new plus.barcode.Barcode('bcid');
                scan.onmarked = onmarked;
                scan.start({
                    conserve: true,
                    filename: '_doc/barcode/'
                });
            }, false);
            // 显示页面并关闭等待框
            ws.show('pop-in');
            //wo.evalJS('closeWaiting()');
        }
        if(window.plus) {
            plusReady();
        } else {
            document.addEventListener('plusready', plusReady, false);
        }
        // 监听DOMContentLoaded事件
        document.addEventListener('DOMContentLoaded', function() {
            domready = true;
            plusReady();
        }, false);
        // 二维码扫描成功
        function onmarked(type, result, file) {
            switch(type) {
                case plus.barcode.QR:
                    type = 'QR';
                    break;
                case plus.barcode.EAN13:
                    type = 'EAN13';
                    break;
                case plus.barcode.EAN8:
                    type = 'EAN8';
                    break;
                default:
                    type = '其它' + type;
                    break;
            }
            result = result.replace(/\n/g, '');
            wo.evalJS("scaned('" + type + "','" + result + "','" + file + "');");
            //返回处理
            //mui.back();
            vm.back();
        }
        // 从相册中选择二维码图片
        function scanPicture() {
            plus.gallery.pick(function(path) {
                plus.barcode.scan(path, onmarked, function(error) {
                    plus.nativeUI.alert('无法识别此图片');
                });
            }, function(err) {
                console.log('Failed: ' + err.message);
            });
        }

        /*
             * 首页返回键处理
             * 处理逻辑：1秒内，连续两次按返回键，则退出应用；
             * from:官方
             */
        var first = null;
        mui.back = function () {
            //首次按键，提示‘再按一次退出应用’
            if (!first) {
                first = new Date().getTime();
                vm.back();
                return false;
                setTimeout(function () {
                    first = null;
                }, 1000);
            } else {
                if (new Date().getTime() - first < 1000) {
                    plus.runtime.quit();
                } else {
                    return false;
                }
            }
        };
    </script>

    <link rel="stylesheet" href="../../css/mui.css" type="text/css" charset="utf-8" />
    <style type="text/css">
        #bcid {
            box-sizing: border-box;
            width: 100%;
            position: absolute;
            top: 7rem;
            bottom: 0;
            text-align: center;
            background-color: #000;

        }

        .tip {
            color: #FFFFFF;
            font-weight: bold;
            text-shadow: 0px -1px #103E5C;
        }

        footer {
            width: 100%;
            height: 44px;
            position: absolute;
            bottom: 0px;
            line-height: 44px;
            text-align: center;
            color: #FFF;
        }

        .fbt {
            width: 50%;
            height: 100%;
            background-color: #FFCC33;
            float: left;
        }

        .fbt:active {
            -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5);
            box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5);
        }
    </style>
</head>

<body  style="background-color: #000000;">
<div id="app">
    <div class="header-nav">
        <span>扫码</span>
        <div class="icon"><img src="../../img/common/btn_back.png" alt=""></div>
    </div>
    <div id="bcid">
        <div style="height:40%"></div>
        <p class="tip">{{title}}</p>
    </div>
</div>

</body>
<script type="text/javascript">
    var vm  = new Vue({
        el:'#app',
        data:{
            title:'...处理中...'
        },
        methods:{
            back:function () {
                this.title='...处理中...';
                scan.cancel();
                scan.close();
                ws.close();
            }
        }
    })
</script>

</html>